<template>
<nav class="pagination is-centered">
  <a :disabled="index === 1" class="pagination-previous" @click="page(index-1)">上一页</a>
  <a :disabled="index >= count" class="pagination-next" @click="page(index+1)">下一页</a>
  <ul :style="{ 'max-width': width }" class="pagination-list">
    <li :key="1" v-show="count>0 && index>1" @click="page(1)">
      <a class="pagination-link">1</a>
    </li>
    <li :key="2" v-show="count>3 && index>3">
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li :key="3" v-show="count>0 && index>2" @click="page(index-1)">
      <a class="pagination-link" v-text="index-1"></a>
    </li>
    <li :key="4" v-show="count>0" @click="page(index)">
      <a class="pagination-link is-current" :class="{'is-loading': loading}" v-text="index"></a>
    </li>
    <li :key="5" v-show="index<count" @click="page(index+1)">
      <a class="pagination-link" v-text="index+1"></a>
    </li>
    <li :key="6" v-show="(index+2)<count">
      <span class="pagination-ellipsis">...</span>
    </li>
    <li :key="7" v-show="(index+1)<count" @click="page(count)">
      <a class="pagination-link" v-text="count"></a>
    </li>
  </ul>
</nav>
</template>
<script>
export default {
  props: {
    index: {
      type: Number,
      require: true
    },
    count: {
      type: Number,
      require: true
    },
    loading: {
      type: Boolean,
      require: true
    }
  },
  methods: {
    page (index) {
      if ((!this.loading) && (index !== this.index) && (index > 0) && (index <= this.count)) this.$emit('change', index)
    }
  },
  computed: {
    width () {
      let baseWidth = 100
      if (this.count < 5) {
        baseWidth = 100 + 40 * (this.count - 1)
      } else if (this.index < 5) {
        baseWidth = 150 + 40 * (this.index + 1)
      } else if (this.count - this.index < 3) {
        baseWidth = 150 + 40 * (this.count - this.index + 2)
      } else {
        baseWidth = 300
      }
      return `${baseWidth}px`
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/scss/base.scss';
.pagination {
  margin: $base-padding 10vw;
  padding-bottom: $base-padding;
  ul {
    max-width: 200px;
    border: none;
    justify-content: center;
  }
}
.pagination-link.is-current{
  background-color: $active-color;
  border-color: $active-color;
  &:hover{
    background-color: $active-color-hover;
    border-color: $active-color-hover;
  }
}
</style>
